<!DOCTYPE html> 
<html> 
	<head> 
		<title>InMobile v2 - Better Mobile &amp; Tablet Template</title> 
        
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0;" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
        
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
        <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Lobster'>

        <link rel="stylesheet" href="__PUBLIC__/themes/dark_blue.css" />
        
        <link rel="stylesheet" href="__PUBLIC__/styles/style.css" />
        
		<script type="text/javascript" src="__PUBLIC__/scripts/jquery-1.6.4.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
        <script type="text/javascript" src="__PUBLIC__/scripts/in-mobile.js"></script>


	</head>
    <body>
        <div data-role="page" data-theme="a">
    
          <div data-role="header" style="margin-bottom: 30px" data-theme="c">
          
              <div data-role="navbar" data-theme="a" data-position="fixed">
                    <ul>
                        <li><a href="http://houge.mcooz.com/kros/index/zndex" data-icon="arrow-l" data-theme="a" rel="external">Back</a></li>
                    </ul>
              </div>
            
          </div><!-- Header -->
          
          <div data-role="content">
          	<div class="ui-body ui-body-a">
             		
                <h2>Buttons</h2>
                
                <p>Buttons with different icons:</p>
                <a href="#" data-role="button" data-icon="delete" data-theme="a">Link button</a> 
                <a href="#" data-role="button" data-icon="arrow-l" data-theme="a">Link button</a> 
                <a href="#" data-role="button" data-icon="arrow-d" data-theme="a">Link button</a> 
                <a href="#" data-role="button" data-icon="check" data-theme="a">Link button</a> 
                
                <p>Grouped buttons</p>
                <div data-type="horizontal" data-role="controlgroup">
                     <a data-role="button" href="#" data-theme="a">Yes</a>
                     <a data-role="button" href="#" data-theme="a">No</a>
                     <a data-role="button" href="#" data-theme="a">Maybe</a>
            	</div>
                
                <p>Horizontal grouped buttons with icons:</p>
                <div data-type="horizontal" data-role="controlgroup">
                    <a data-icon="plus" data-role="button" href="#" data-theme="a">Add</a>
                    <a data-icon="delete" data-role="button" href="#" data-theme="a">Delete</a>
                </div>
            
                <p>Horizontal grouped buttons, icon only:</p>
                <div data-type="horizontal" data-role="controlgroup">
                    <a data-iconpos="notext" data-icon="arrow-u" data-role="button" href="#" title="Up" data-theme="a">Up</a>
                    <a data-iconpos="notext" data-icon="arrow-d" data-role="button" href="#" title="Down" data-theme="a">Down</a>
                    <a data-iconpos="notext" data-icon="delete" data-role="button" href="#" title="Delete" data-theme="a">Delete</a>
                </div>
                
                <p>Action buttons</p>
                <a href="#" data-role="button" data-inline="true">Cancel</a>
                <a href="#" data-role="button" data-inline="true" data-theme="a">Save</a>
            
            	<h2>Layout formating</h2>
                
                <p>50% width A grid</p>
                <div class="ui-grid-a">
                    <div class="ui-block-a" data-theme="a"><div style="height: 120px;" class="ui-bar ui-bar-a">Block A</div></div>
                    <div class="ui-block-b"><div style="height: 120px;" class="ui-bar ui-bar-a">Block B</div></div>
                </div><!-- /grid-a -->
                
                <p>33.3333% width B grid</p>
                <div class="ui-grid-b">
                    <div class="ui-block-a"><div style="height: 120px;" class="ui-bar ui-bar-a">Block A</div></div>
                    <div class="ui-block-b"><div style="height: 120px;" class="ui-bar ui-bar-a">Block B</div></div>
                    <div class="ui-block-c"><div style="height: 120px;" class="ui-bar ui-bar-a">Block C</div></div>
                </div><!-- /grid-b -->
                
                <p>25% width C grid</p>
                <div class="ui-grid-c">
                    <div class="ui-block-a"><div style="height: 120px;" class="ui-bar ui-bar-a">Block A</div></div>
                    <div class="ui-block-b"><div style="height: 120px;" class="ui-bar ui-bar-a">Block B</div></div>
                    <div class="ui-block-c"><div style="height: 120px;" class="ui-bar ui-bar-a">Block C</div></div>
                    <div class="ui-block-d"><div style="height: 120px;" class="ui-bar ui-bar-a">Block D</div></div>
                </div><!-- /grid-c -->
                
                <p>A grid usage:</p>
                <fieldset class="ui-grid-a">
                    <div class="ui-block-a"><button type="submit" data-theme="b">Cancel</button></div>
                    <div class="ui-block-b"><button type="submit" data-theme="a">Submit</button></div>	   
                </fieldset>
                
                <h2>Accordions</h2>
                		
                <p>Style 1</p>
                <div data-role="collapsible-set">
                
                    <div data-role="collapsible">
                    <h3>Section 1</h3>
                    <p>I'm the collapsible set content for section B.</p>
                    </div>
                    
                    <div data-role="collapsible">
                    <h3>Section 2</h3>
                    <p>I'm the collapsible set content for section B.</p>
                    </div>
                    
                    <div data-role="collapsible">
                    <h3>Section 3</h3>
                    <p>I'm the collapsible set content for section C.</p>
                    </div>
                    
                </div>
                
                <p>Style 2</p>
                <div data-role="collapsible-set" data-theme="b" data-content-theme="b">
                
                    <div data-role="collapsible">
                    <h3>Section 1</h3>
                    <p>I'm the collapsible set content for section B.</p>
                    </div>
                    
                    <div data-role="collapsible">
                    <h3>Section 2</h3>
                    <p>I'm the collapsible set content for section B.</p>
                    </div>
                    
                    <div data-role="collapsible">
                    <h3>Section 3</h3>
                    <p>I'm the collapsible set content for section C.</p>
                    </div>
                    
                </div>
                
                <p>Multiple styling</p>
                <div data-role="collapsible-set">
                
                    <div data-role="collapsible" data-theme="c" data-content-theme="d">
                    <h3>Section 1</h3>
                    <p>I'm the collapsible set content for section B.</p>
                    </div>
                    
                    <div data-role="collapsible" data-theme="b" data-content-theme="a">
                    <h3>Section 2</h3>
                    <p>I'm the collapsible set content for section B.</p>
                    </div>
                    
                    <div data-role="collapsible" data-theme="c" data-content-theme="b">
                    <h3>Section 3</h3>
                    <p>I'm the collapsible set content for section C.</p>
                    </div>
                    
                </div>
	
            </div>
          </div>
          
          <!-- /Content -->
          
          <div data-role="footer" data-theme="a">
            <div data-role="navbar" data-grid="c" data-theme="a" data-position="fixed">
                <ul>
                    <li><a href="http://g.co/maps/55r27" data-icon="search" data-theme="a">Map</a></li>
                    <li><a href="mailto:youremail@company.org" data-icon="info" data-theme="a">Mail</a></li>
                    <li><a href="gallery.html" data-icon="star" data-theme="a" rel="external">Portfolio</a></li>
                    <li><a href="#" data-icon="arrow-u" data-theme="a" class="returnTopAction">Return Top</a></li>
                </ul>
			</div>
          </div>
          <!-- /Footer --> 
        </div>
        <!-- /Home -->      
    </body>
</html>
